<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>派车申请书</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">
        layui.use(['layer' ,'form', 'layedit', 'laydate', 'jquery'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,$ = layui.jquery;

            //日期
            laydate.render({
                elem: '#begin-time'

                ,min:getNowFormatDate()
            });
            laydate.render({
                elem: '#end-time'

                ,min:getNowFormatDate()
            });
            //监听提交
            form.on('submit(demo1)', function(data){
                var province = $("#province option:selected").html();
                var city = $("#city option:selected").html();
                var district = $("#district option:selected").html();
                $("#location").val(province+city+district);
                $.ajax({
                    url:'/management/submitHotelApplication?location='+$("#location").val()
                    ,data:data.field
                    ,success:function(){
                        layer.msg('提交成功');
                        window.location = '/management/applicationsCanBookHotel';
                    },
                })
                return false;
            });

            //选择市
            form.on('select(province)', function () {
                var num = $('#province').val();
                $.ajax({
                    url:'/management/getHotelCity?code=' + num,
                    success:function (data) {
                        $('#city').empty();
                        $("#district").empty();
                        var optionstring = "";
                        $.each(data, function(i,item){
                            optionstring += "<option value="+item.code+">"+item.name+"</option>"
                        });
                        $("#city").html('<option value="">直接选择或搜索选择</option>' + optionstring);
                        form.render('select');
                    }
                })
            });

            //选择区
            form.on('select(city)', function () {
                var num=$('#city').val();
                $.ajax({
                    url:'/management/getHotelDistrict?code=' + num,
                    success:function (data) {
                        $("#district").empty();
                        var optionstring = "";
                        $.each(data, function(i,item){
                            optionstring += "<option value="+item.code+">"+item.name+"</option>"
                        });
                        $("#district").html('<option value="">直接选择或搜索选择</option>' + optionstring);
                        form.render('select');
                    }
                })
            });
            form.verify({
                confirmData:function(value){
                var startDate = new Date($('#begin-time').val()).getTime();
                var endTime = new Date(value).getTime();
                if(endTime < startDate) {
                    return '结束时间不能小于开始时间';
                }
            }
            });

            //选择项目
            // form.on('select(projectType)', function () {
            //     var num=$('#projectType').val();
            //     $.ajax({
            //         url:'/management/getApplicationsByProjectType?id=' + num,
            //         success:function (data) {
            //             $('#projectName').empty();
            //             $("#passengers").empty();
            //             $('#projectName').append('<option value="">直接选择或搜索选择</option>');
            //             var optionstring = "";
            //             $.each(data, function(i,item){
            //                 optionstring += "<option value="+item.id+">"+item.numbering+'/'+item.staff.name+'/'+item.supplier.name+"</option>"
            //             });
            //             $("#projectName").html('<option value="">直接选择或搜索选择</option>' + optionstring);
            //             form.render('select');
            //         }
            //     })
            // });

            //自动添加随行人员
            // form.on('select(projectName)', function () {
            //     var num=$('#projectName').val();
            //     $.ajax({
            //         url:'/management/getApplicationStaffs?id=' + num,
            //         success:function (data) {
            //             $("#passengers").empty();
            //             var inputstring = "";
            //             $.each(data, function(i,item){
            //                 inputstring += "<div class=\"layui-inline\">\n" +
            //                     "                    <label class=\"layui-form-label\">姓名</label>\n" +
            //                     "                    <div class=\"layui-input-inline\">\n" +
            //                     "                        <input value="+item.staff.name+" lay-verify=\"required\" type=\"text\" readonly=\"readonly\" autocomplete=\"off\" class=\"layui-input\">\n" +
            //                     "                    </div>\n" +
            //                     "                 </div>\n" +
            //                     "                <div class=\"layui-inline\">\n" +
            //                     "                    <label class=\"layui-form-label\">电话</label>\n" +
            //                     "                    <div class=\"layui-input-inline\">\n" +
            //                     "                        <input value="+item.staff.phone+" lay-verify=\"required\" type=\"text\" readonly=\"readonly\" autocomplete=\"off\" class=\"layui-input\">\n" +
            //                     "                    </div>\n" +
            //                     "                </div>\n" +
            //                     "                <div class=\"layui-inline\">\n" +
            //                     "                    <label class=\"layui-form-label\">身份证号</label>\n" +
            //                     "                    <div class=\"layui-input-inline\">\n" +
            //                     "                        <input value="+item.staff.card+" lay-verify=\"required\" type=\"text\" readonly=\"readonly\" autocomplete=\"off\" class=\"layui-input\">\n" +
            //                     "                    </div>\n" +
            //                     "                </div>"
            //             });
            //             $("#passengers").html(inputstring);
            //             $("#peopleNumber").val(data.length);
            //         }
            //     })
            // });
        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }
    </script>
</head>
<body>
<button class="layui-btn layui-btn-sm" style="position: fixed" onClick="javascript :history.back(-1);">返回</button>
<div style="margin: auto; width: 1000px"><br><br>
    <h1>酒店预订申请</h1>
    <form class="layui-form" action="" method="post">
        <input type="hidden" name="node" value="1">
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>基本信息</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">申请人</label>
                    <div class="layui-input-inline">
                        <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="${session.user.name}">
                        <input type="hidden" th:value="${session.user.id}" name="staff.id" id="applicating_staff">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <!--暂时写成死的，因为就一种项目类型-->
                <div class="layui-inline">
                    <label class="layui-form-label">项目类型</label>
                    <div class="layui-input-inline">
                        <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="出差项目">
                        <input type="hidden" th:value="1" name="applicationType">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required" class="layui-input" th:value="|${applicationBasicInfo.numbering}/${applicationBasicInfo.staff.name}/${applicationBasicInfo.supplier.name}|"/>
                        <input type="hidden" th:value="${applicationBasicInfo.id}" name="applicationId">

                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">人数</label>
                    <div class="layui-input-inline">
                        <input th:value="${applicationBasicInfo.travelPeoples.size()}" id="peopleNumber" name="peopleNumber" lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入住时间</label>
                    <div class="layui-input-inline">
                        <input type="text"autocomplete="off" name="startTime" id="begin-time" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text"autocomplete="off" name="endTime" id="end-time" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">期望地点</label>
                <div class="layui-input-inline">
                    <select id="province" lay-filter="province"  lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="province:${allProvince}" th:value="${province.code}" th:text="${province.name}"></option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="city" lay-filter="city" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="province:${allProvince}" th:value="${province.code}" th:text="${province.name}"></option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="district" lay-filter="district" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="province:${allProvince}" th:value="${province.code}" th:text="${province.name}"></option>
                    </select>
                </div>

            </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>入住人员</legend>
            <div id="passengers" class="layui-form-item">
                <div th:each="travelpeople:${applicationMembers}">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input th:value="${travelpeople.staff.name}" lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证</label>
                        <div class="layui-input-inline">
                            <input th:value="${travelpeople.staff.card}"type="text" readonly="readonly" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input th:value="${travelpeople.staff.phone}"type="text" readonly="readonly" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

            </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>备注</legend>
            <div class="layui-form-item">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label"> </label>
                    <div class="layui-input-block">
                        <textarea lay-reqtext="请输入房间要求，例如:两间标间、一间商务等" lay-verify="required" name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </fieldset>
        <input type="hidden" name="location" id="location">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button style="margin-left: 600px" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
